import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreators } from './store';
 
import {
  BannerWrapper,
  Announcement,
  Anntitle,
  AnnList,
  ServiceWrapper
} from './style.js'

import { Carousel,Icon } from 'antd'
 
class Banner extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showNote: true,
      closeNote: false
    }
  }
  componentDidMount() {
    this.props.getAllAnnounce()
    this.props.getBannner()
    setTimeout(()=> {
      if(document.getElementById('note')) {
        document.getElementById('note').style.maxHeight =  document.getElementById('banner').height -50  + 'px'
      }

      if(document.getElementsByClassName('lcycxb')[0]) {
        document.getElementsByClassName('lcycxb')[0].style.height = document.getElementById('banner').height + 'px'
      }
     
      // document.getElementById('bannerWrapper').style.height =  document.getElementById('banner').height + 'px'
    },600)

  }

  renderList() {
    let list = this.props.announceList
    let str = ''
    if(list.length>0) {
      str = <p style={{wordBreak: 'break-all', wordWrap: 'break-word', overflow: 'hidden', lineHeight: '28px', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical'}}>{list[0].content}</p>
    }
    return str
  }
  render() {
    let list = this.props.announceList
    return (
      <BannerWrapper>
        <Carousel autoplay>
          {
            this.props.banner.map(item=> {
              return (<div key={item}>
                <img id="banner" src={item} style={{width: '100%'}} />
              </div>)
            })
          }
        </Carousel>
        {
          this.state.closeNote ? '' : <Announcement id="note">
          <Anntitle>最新公告</Anntitle>
          {
            this.state.showNote ?  <div>
            <AnnList>
              {this.renderList()}
            </AnnList>
            <ServiceWrapper>
              <p><i className="iconfont icon-service"></i>客服电话：4001566077  {list.length > 0 ? <Link to={"/note/" + list[0].id +'' } style={{marginLeft: '10px'}}>显示全部</Link> : ''}</p>
            </ServiceWrapper>
          </div> : ''
          }
          <span style={{position: 'absolute', right: '10px', top: '10px'}}>
            {
              this.state.showNote ? <Icon type="down" style={{marginRight: '10px'}} onClick={()=> this.setState({showNote: false})} /> : <Icon type="up" style={{marginRight: '10px'}} onClick={()=> this.setState({showNote: true})} />
            }
            <Icon type="close" onClick={()=> this.setState({closeNote: true})}/>
          </span>
        </Announcement>
        }
       
      </BannerWrapper>
    )
  }
}

const mapState = (state)=> ({
  announceList: state.getIn(['banner', 'announce']),
  banner: state.getIn(['banner', 'banner'])
})

const mapDispatch = (dispatch) =>({
  getAllAnnounce() {
    dispatch(actionCreators.getAnnounce())
  },
  getBannner() {
    dispatch(actionCreators.getBanner({
      type: 0
    }))
  }
})


export default connect(mapState, mapDispatch)(Banner)